<template>
    <div class="box">
        <ul class="list" >
            <li v-for="item in items" class="item">
                <div class="bg" :style="{'background-color':item.color}"></div>
                <div class="panel" :style="{'color':item.style}">
                    <div class="title">{{item.title}}</div>
                    <div class="author">{{item.author}}</div>
                    <div class="desc">{{item.desc}}</div>
                    <div class="date">{{item.date}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        props : [],
        data(){
            return{
                items:[
                    {
                        title:'这是一个测试用的标题长度不够复制凑',
                        author:'Delicate',
                        date:'2017-01-22 23:21:15',
                        desc:'这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑',
                        color:'#FF6666',
                        style:'#ECECEC'
                    },
                    {
                        title:'这是一个测试用的标题长度不够复制凑',
                        author:'Delicate',
                        date:'2017-01-22 23:21:15',
                        desc:'这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑',
                        color:'#FFFF00',
                        style:'#333333'
                    },
                    {
                        title:'这是一个测试用的标题长度不够复制凑',
                        author:'Delicate',
                        date:'2017-01-22 23:21:15',
                        desc:'这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑',
                        color:'#006699',
                        style:'#ECECEC'
                    },
                    {
                        title:'这是一个测试用的标题长度不够复制凑',
                        author:'Delicate',
                        date:'2017-01-22 23:21:15',
                        desc:'这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑',
                        color:'#CC6600',
                        style:'#ECECEC'
                    },
                    {
                        title:'这是一个测试用的标题长度不够复制凑',
                        author:'Delicate',
                        date:'2017-01-22 23:21:15',
                        desc:'这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑',
                        color:'#CCCC44',
                        style:'#333333'
                    },
                    {
                        title:'这是一个测试用的标题长度不够复制凑',
                        author:'Delicate',
                        date:'2017-01-22 23:21:15',
                        desc:'这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑',
                        color:'#336699',
                        style:'#ECECEC'
                    },
                    {
                        title:'这是一个测试用的标题长度不够复制凑',
                        author:'Delicate',
                        date:'2017-01-22 23:21:15',
                        desc:'这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑',
                        color:'#FF0033',
                        style:'#ECECEC'
                    },
                    {
                        title:'这是一个测试用的标题长度不够复制凑',
                        author:'Delicate',
                        date:'2017-01-22 23:21:15',
                        desc:'这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑',
                        color:'#333399',
                        style:'#ECECEC'
                    },
                    {
                        title:'这是一个测试用的标题长度不够复制凑',
                        author:'Delicate',
                        date:'2017-01-22 23:21:15',
                        desc:'这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑这是一个测试用的标题长度不够复制凑',
                        color:'#CCCC00',
                        style:'#333333'
                    }
                ]
            }
        }
    }
</script>
<style scoped>
    .box{
        position: relative;
        width:100%;
        height:100%;
    }
    .box .list{
        position: absolute;
        top:0;
        left:0;
        white-space: nowrap;
        height:100%;
        font-size: 0;
        transition: all 0.2s ease-out;
        overflow-x: auto;
    }
    .box .list .item{
        position: relative;
        display: inline-block;
        width:300px;
        height:100%;
    }
    .box .list .item .bg{
        position: absolute;
        width:300px;
        height:100%;
        left:0;
        top:0;
        transform: translate3d(0,0,0);
        background-color: #cccccc;
        transition: all .3s ease-out;
    }
    .box .list .item:nth-child(2n-1) .bg{
        background-color: #ffffff;
    }
    .box .list .item:hover .bg{
        z-index: 11;
        width:340px;
        transform: translate3d(-20px,0,0);
    }
    .box .list .item .panel{
        position: relative;
        display:flex;
        flex-direction: column;
        width:100%;
        height:100%;
        left:0;
        top:0;
        box-sizing: border-box;
        padding:30px 20px;
        z-index: 13;
        font-size: 14px;
        transition: all 0.3s ease-out;
    }
    .box .list .item:hover .panel{
    }
    .box .list .item .panel div{
        width:100%;
        text-align: center;
        word-wrap: break-word;
        white-space: pre-line;
    }
</style>